<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生兴OA办公管理系统</title>
 <div th:include="commons/easyui::easyui"></div>
 <style>
 #tabs .tabs-panels>.panel>.panel-body {
	overflow: hidden;
}

.panel-body{
overflow: hidden;
}

  
  
  #nav-accordion  ul {
	padding: 0px;
	margin: 0px;
}

#nav-accordion ul li {
	background-color: #B4CDCD;
	list-style: none;
	padding: 5px 0px;
	margin: 1px;
	text-align: center;
}

#nav-accordion ul li a {
	text-decoration: none;
	line-height: 15px;
	color: #fff;
}

#nav-accordion ul li a.active {
	background-color: "#66ccff";
	color: red;
}

.top{
    position:relative;
    background:#438eb9;
    height: 80px;
   
    
  }
.top-header{
   position: absolute;
   margin:auto 10px;
   padding:20px 30px;
   font-size: 20px;
   line-height:20px;
   width:300px;
   height:30px;
   /* border: 1px red solid; */
   left: 20px;
   bottom:2%;
   
  
  }
.userInfo{
     
      padding:5px 15px;
      line-height: 20px;
      font-size: 14px;
      /* border: 1px solid red; */
      position: absolute;
      right: 50px;
      bottom:4%;
      vertical-align: middle;
      text-align: center;
      
}
.userPic{
   width:40px;
   height:40px;
   border-radius: 50%;
   vertical-align: middle;
}

 </style>
 
 <script type="text/javascript">
	


	
	$(function(){
		
		
		initMenu();
		
		$('#tabs').tabs({
			onSelect : function(title, index) {
				$("#nav-accordion ul li").css({
					"background" : "#B4CDCD"
				});
				$('#nav-accordion ul li[title=' + title + ']').css({
					"background" : "#AEEEEE"
				});
                
				
				
		        if(index !=0){
		        	var pid = $('#nav-accordion ul li[title=' + title + ']').attr("pid");
					var selectAccordon = $("#menu" + pid).attr("alt");
					$('#nav-accordion').accordion('select', selectAccordon);
		        	document.getElementById(title).contentWindow.location.reload(true);
		        }
			}

		});
		
		addTab("首页",'/common/index'); 
		
		
		$("#nav-accordion ul li").click(function() {
			$("#nav-accordion ul li").css({
				"background" : "#B4CDCD" 
			});
				
			$(this).css({
				"background" : "#AEEEEE"
			})

		});
	 
		 
		
		
		
		
	});
	
	function initMenu(){
		
		$.ajax({
			type : 'get',
			url : '/sys/menu/menusByUserId',
			
			contentType : 'application/json;charset=UTF-8',
			success : function(data) {
				
				createMenus(data.rows);
				
			
			
			
			
			
				
				
			}
		});
		
	}
   
/* 	创建系统菜单，根据用户的ID 来创建用户菜单的	 */
	function createMenus(rows){
		/* 完成一级目录 */
		rows.forEach(function(item,index){
			
			if(item.parentId!=null && item.type==0){
			
				$("#nav-accordion").append('<div id="menu'+item.menuId+'" alt="'+item.name+'"  title="'+item.name+'"  style="overflow:auto;"><ul></ul></div>');	  
			}
		});
		
		/* 二级目录循环 */
		rows.forEach(function(item,index){
			if(item.parentId!==1 && item.type==1){
			
			   var addtab ="addTab('"+item.name+"','"+item.url+"');";
	       	   $("#menu"+item.parentId+" ul").append('<li title="'+item.name+'" pid="'+item.parentId+'"><a href="#" onclick="'+addtab+'">'+item.name+'</a></li>');
			}
		});
		
		$("#nav-accordion").accordion({
	         fit:true
        });
		
		
		
		
		
	}
	
	
	function addTab(title, url) {
		var flag=true;
		if(title=='首页'){
			flag=false;
		}
		 
		if ($('#tabs').tabs('exists', title)) {
			$('#tabs').tabs('select', title);
		} else {
			var content = '<iframe id="'+title+'" name="'+title+'" title="' + title
					+ '" frameborder="0"  src="' + url
					+ '" style="width:100%;height:100%;"></iframe>';
			$('#tabs').tabs('add', {
				title : title,
				content : content,
				closable : flag
			});
		}

	}
 
 </script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north'" style="overflow:hidden;" >
	 <div class="top">
	    <div class="top-header">生兴科技信息公共服务平台 </div>  
	    
	    <div class="userInfo"><img class="userPic" alt="" src="/image/123.jpg">
	    欢迎&nbsp;&nbsp;<span style="color:red;">[(${user.userName})]</span>&nbsp;&nbsp;,<a href="/logout">退出</a>
	    </div> 
	 </div>
	</div>   
    <div data-options="region:'south'"  >
       <div th:include="easyui/footer::footer"> </div>
	
	</div>
       
    <div data-options="region:'west',title:'导航'" style="width:210px;">
	   <div id="nav-accordion" >   
		   
	   </div>
	    
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;overflow:hidden;"  >
    
    <div id="tabs" class="easyui-tabs" data-options="fit:true" style="overflow:hidden;" >
		
    </div>   
    
    <div id="role_dialog"></div>
    <div id="menu_dialog"></div>
    <div id="dept_tree"></div>
    <div id="user_dialog"></div>
    <div id="definition_dialog"></div>
    
    
</body>
</html>